<template>
  <div class="process-monitor">
    <el-dialog 
      :visible.sync="dialogProcessVisible" 
      :width="device === 'mobile' ? '90%' : '60%'"
    >
      <div slot="title" class="dialog-header">
        <div class="name">【{{processStatics.modelName}}】
          <!-- <span class="model-name" v-if="processStatics.modelName">{{processStatics.modelName}}</span> -->
        </div>
        <el-button v-if="fromTask && showPager" type="text" @click="togglePage = !togglePage">{{ togglePage ? '流程图':'处理签' }}
        </el-button>
        <div v-if="!togglePage" class="desc">
          <ul>
            <li class="text">
              <span class="type"></span>已完成任务
            </li>
            <li class="text">
              <span class="type danger"></span>当前任务
            </li>
            <li class="text">
              <span class="type warning"></span>未开始任务
            </li>
          </ul>
        </div>
      </div>
      <div v-if="!togglePage" class="point-list">
        <div class="amount-desc">
          <el-tag style="width: 100%">
            <span class="name">已完成任务:</span> {{ processStatics.doneCount}}
            <span class="name">当前任务:</span> {{ processStatics.curCount}}
            <span class="name">未开始任务:</span> {{ processStatics.willCount}}
          </el-tag>
        </div>

        <el-timeline v-if="activities.length" class="process-info ">
          <el-timeline-item v-for="(item, index) in activities" :key="index"
            :type="pointStatus(item.status) || 'primary'" size="large">
            <el-card>
              <div class="header clearfix" :style="{background: bgColor(item.status) || '#6bb4ff'}">
                <span class="point-name">{{ item.name }}</span>
                <span class="user"><i class="icon el-icon-user"></i>{{ item.assignee }}</span>
              </div>
              <div class="content">
                <template v-if="fromTask">
                  开始时间:<span class="time">{{ parseTime(item.startTime) || '--'}}</span>
                  结束时间:<span class="time">{{ parseTime(item.endTime) || '--'}}</span>
                </template>
                <template v-else>
                  开始时间:<span class="time">{{ parseTime(item.time) || '--'}}</span>
                </template>
              </div>
              <!-- <div v-if="item.variables && item.variables.circulationUserStr" class="suggest">
                已流转至{{ item.variables.circulationUserStr}} 
              </div> -->
              <div v-if="item.name !== '发起任务'" class="suggest">
                办理意见：{{ dealReason(item) }} 
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
        <div class="empty" v-else>
          没有数据
        </div>
      </div>
      <div v-else class="handPager">
        <hang-pager :pager="pager" :taskId="processStatics.taskId" :processCode="processCode"></hang-pager>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { parseTime } from '@/utils/index.js'
  export default {
    name: "ProcessMinitor",
    props: {
      activities: {
        type: Array,
        default () {
          return []
        }
      },
      processStatics: {
        type: Object,
        default () {
          return {}
        }
      },
      pager: {
        type: Object,
        default: () => {},
      },
      fromTask: {
        type: Boolean,
        default: false
      },
      processCode: {
        type: String
      },
      showPager: {
        type: Boolean,
        default: true
      }
    },
    components: {
      'hang-pager': () => import('./handPager')
    },
    computed: {
      device() {
        return this.$store.state.app.device;
      }
    },
    watch: {
      dialogProcessVisible(status) {
        //  关闭流程监控dialog
        if(!status) {
          this.$emit('onCloseDialog')
        }
      }
    },
    data(){
      return {
        dialogProcessVisible: false,
        togglePage: false
      }
    },
    methods: {
      parseTime,
      // 设置处理人
      dealUser(item) {
        if (this.fromTask) {
          if (item.variables) {
            return item.variables.dealUserName
          } else {
            return ''
          }
        } else {
          return item.userId
        }
      },
      // 设置拟办意见
      dealReason(item) {
        if (this.fromTask) {
          if (item.variables && item.variables.dealReason) {
            return item.variables.dealReason
          } else {
            return '暂无'
          }
        } else {
          return item.message
        }
      },
      bgColor(name) {
        const color = {
          '已完成任务': '#6bb4ff',
          '当前任务': '#F56C6C',
          '未开始任务': '#ffba52'
        }
        return color[name]
      },
      pointStatus(name) {
        const status = {
          '已完成任务': 'primary',
          '当前任务': 'danger',
          '未开始任务': 'warning'
        }
        return status[name]
      }
    }
  }

</script>
<style lang="scss">
  .dialog-header {
    .name {
      display: inline-block;
      font-size: 17px;
      line-height: 24px;
      .model-name{
        font-size: 18px;
      }
    }

    .desc {
      float: right;

      ul {
        list-style-type: none;
        padding: 0;
        margin: 0 36px 0 0;

        li {
          display: inline-block;
          margin-right: 6px;
          font-size: 12px;

          .type {
            display: inline-block;
            width: 10px;
            height: 10px;
            margin-right: 3px;
            background: #6bb4ff;
          }

          .danger {
            background: #F56C6C;
          }

          .warning {
            background: #ffba52;
          }
        }
      }
    }
  }

  .amount-desc {
    margin-bottom: 20px;

    .name {
      font-weight: normal;
      color: rgba(0, 0, 0, .9);
      margin-left: 5px;
    }

    .el-tag {
      font-size: 14px;
      height: 40px;
      line-height: 40px;
      font-weight: 600;
      background-color: #e6f7ff;
      border: 1px solid #91d5ff;
    }
  }

  .process-info {
    padding-left: 5px;

    .header {
      padding: 8px 20px;
      border-bottom: 1px solid #efefef;
      color: #fff;

      .point-name {
        line-height: 24px;
      }

      .user {
        float: right;
        padding: 3px 0;

        .icon {
          padding-right: 3px;
        }
      }

    }

    .content,
    .suggest {
      padding: 0 20px 5px;
    }

    .content {
      font-size: 12px;
      color: #999;

      .time {
        display: inline-block;
        margin-right: 16px;
        padding: 10px 0;
      }
    }

    .el-card__body {
      padding: 0;
    }

    .el-card__header {
      padding: 8px 20px;
    }

  }

  .empty {
    text-align: center;
    padding: 20px;
  }

</style>
